跳到主要内容

过渡

当控件的部分属性被修改后，控件会平滑过渡到新的状态。 过渡可以用来实现一些动画效果。

transition = {
    -- 当控件大小发生变化时，在200毫秒内平滑过渡到新的状态，使用的曲线函数为'linear'
    size = {
        time = 200,
        func = 'linear',
    }
}

transition 指定当某个属性（size、position等）变化时，所对应的过渡效果。 time 指定当属性变化时，花费多少毫秒从初始状态过渡到新状态。 func 指定过渡曲线。

支持的属性​

  • size 当控件大小改变时生效（包括宽度改变和高度改变）
  • position 当控件坐标改变时生效
  • show 当控件隐藏或显示时生效
  • opacity 当控件透明度改变时生效
  • progress 当进度条进度改变时生效（仅对进度条控件有效）
  • scale 当控件缩放改变时生效（包括横向缩放和纵向缩放）
  • rotate 当控件旋转改变时生效
  • custom 自定义数值过渡，详细说明见 自定义数值过渡 一节

支持的曲线函数​

内置的曲线函数​

支持一些内置的曲线函数：

  • linear
  • ease
  • ease_in
  • ease_out
  • ease_in_out

自定义曲线函数​

可以通过 func 指定自定义曲线，如：

transition = {
    position = {
        time = 200,
        -- 自定义曲线函数
        func = {0.04, 1.14, 0.98, -0.04}
    }
}

实际效果可以参考测试用例： Script/test/custom_transition.lua

曲线效果在线预览：

https://cubic-bezier.com/

自定义运动轨迹​

当指定 position 的过渡效果时，可以自定义控件的运动轨迹：

transition = {
    position = {

        -- 过渡时间
        time = 200,

        -- 指定过渡效果为曲线
        func = 'curve',

        -- 曲线路径上的锚点，锚点决定控件的运动轨迹
        -- 锚点值为绝对坐标
        anchors = {{1200, 425}, {1500, 225}}
    }
}

对应的曲线类型： curve 需要指定的额外参数：

  • anchors 是一个数组，数组里存放每个锚点的xy绝对坐标，锚点可以有多个，控件会根据锚点计算出运动曲线。

更详细的例子可以参考 Script/test/transition_curve.lua

自定义数值过渡​

可以使用自定义数值过渡实现一些自定义的动画效果，如不断变化的文本等。

自定义数值过渡使用custom字段，没有初始化值。控件定义时需要通过bind来指定。

local label = base.ui.label {
    bind = {
        text = 'text',
        -- 控件定义里绑定 transition 的 custom 属性
        transition = {
            custom = 'custom'
        }
    }
}

应用一个数值过渡：

local ui, bind = base.ui.create(label)
bind.custom = {
    time = 5000,    -- 过渡时间
    func = 'ease_in',   -- 过渡函数曲线
    from = 0, -- 指定数值从 0 开始变化
    to = 999, -- 指定数值变化到 999
    -- 每次值变化时，会调用 callback
    callback = function(value)
        -- 修改 label 文本
        bind.text = '文本变化 ' .. math.floor(value)
    end
}

属性说明：

  • from to 浮点数类型，指定值的变化范围
  • callback 回调函数，当值变化时会被调用

实际效果：